// 样式私有化处理  styled-components
import React from "react";
import styled from "styled-components";
import {CommonListBox, titleSize, colorRed} from "./common"

/* 编写组件的样式： 基于 css-in-js 思想中的 styled-components 插件 */
const MenuBox = styled.div`
  background: lightblue;
  width: 400px;

  .title {
    font-size: ${titleSize}px;
    line-height: 40px;

    &:hover {
      color: ${colorRed}
    }
  }
`

class Menu extends React.Component {
    render() {
        return <MenuBox>
            <CommonListBox>
                <li>手机</li>
                <li>电脑</li>
                <li>家电</li>
            </CommonListBox>
        </MenuBox>;
    }
};


export default Menu;